<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
		<link rel="stylesheet" href="css/style.css">
		<script src="js/jquery-3.6.0.min.js"></script>
		<script src="js/message.json"></script>
		<title>小米购物车</title>
	</head>
	<body>
		<div class="miBox"><!-- 209010238薛本莲 -->
			<!-- 上面logo部分 -->
			<div class="miLogo">
				<!-- contain -->
				<div class="container" id="section">
					<div><a href="#" class="logo"></a></div>
					<div class="miTitle">
						<h2>我的购物车</h2>
						<p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
					</div>
					<div class="right">
						<a href="#" class="login">登录</a>
						<span>|</span>
						<a href="#" class="enroll">注册</a>
					</div>
				</div>
			</div>
			<!-- 上面logo部分 end -->

			<!-- page -->
			<div id="car" class="container">
				<!-- 购物车头部文字-->
				<div class="carHead">
					<input type="checkbox" class="choic" v-model='check' @change="choiceAll()">
					<!-- <div class="choic choicAllBox">
						<img src="img/duigou.png" class="choicPic choicAll">
					</div> -->
					<div class="showPic">全选</div>
					<div class="productName">商品名称</div>
					<div class="price">单价</div>
					<div class="count">数量</div>
					<div class="allCount">小计</div>
					<div class="operation">操作</div>
				</div>
				<!-- 详情-->
				<ul class="message">
					<li v-for="(item,index) in pData">
						<input type="checkbox" class="choic" v-model='checkList' :value='item' @change="choiceItem">
						<a href="#" class="showPic showImg"><img :src="item.pic"></a>
						<a href="#" class="productName">{{item.pName}}</a>
						<div class="price">{{item.price}}元</div>
						<div class="count countLine">
							<a href="#" v-on:click="decrease(index)">&ndash;</a>
							<input type="text" :value="item.num">
							<a href="#" @click="increase(index)">+</a>
						</div>
						<div class="allCount" id="allCount">{{item.smalPrice}}元</div>
						<div class="operation">
							<p class="err" @click="delt(index)">&#10006;</p>
						</div>
					</li>
				</ul>

				<!-- 结算-footer -->
				<div class="sumBox container">
					<div class="sumLeft">
						<a href="#" class="countinue">继续购物</a>
						<span class="choicCount">
							已选择<span class="choicNum">{{totalNum}}</span>件
						</span>
					</div>
					<div class="sumRight">
						<span class="sum">
							合计：<span class="choicMoney">{{totalPrice}}</span>元
						</span>
						<a href="#" class="account">
							去结算
						</a>
					</div>
				</div>
				<!-- 结算-footer end -->
			</div>
			<!-- page end -->

		</div>
		<script src="js/shopCarVue.js"></script>



		<!-- // 单选
			let choicItemBox = document.getElementsByClassName('choicItemBox');
			let choicImg = document.getElementsByClassName('choicImg');
			// console.log(choicItemBox);

			for (let i = 0; i < choicImg.length; i++) {
				// choicItem(i);
				choicItemBox[i].addEventListener('click', function() {
						if (choicImg[i].style.display = 'block') {
							choicImg[i].style.display = 'none';
						} else {
							choicImg[i].style.display = 'block';
						}

					})
			}

			// 全选
			let choicAllBox = document.getElementsByClassName('choicAllBox')[0];
			let choicAll = document.querySelector('.choicAll');
			choicAllBox.addEventListener('click', function() {
				for (let i = 0; i < choicImg.length; i++) {
					if (choicAll.style.display == 'block') {
						// 取消
						choicAll.style.display = 'none';
						choicImg[i].style.display = 'none';
					} else {
						choicAll.style.display = 'block';
						choicImg[i].style.display = 'block';
					}
				}
			});


				choicImg[i].style.display = 'block';
				// choicImg[i].classList.remove('choicImg');
			});
			// 取消
			choicImg[i].addEventListener('click', function() {
				choicImg[i].style.display = 'none';
				// choicImg[i].classList.add('choicImg');
				console.log('a');
			})

			function choicItem(i) {
				choicItemBox[i].addEventListener('click', function() {
					if (choicImg[i].style.display = 'block') {
						choicImg[i].style.display = 'none';
					} else {
						choicImg[i].style.display = 'block';
					}

				})
			} -->
		<!-- <script>
			let choicImg=document.getElementsByClassName('choicImg');
			choicImg.click=choiceItem;
			function choiceItem(){
				for(let i=0;i<choicImg.length;i++){
					choicImg[i].style.display='block';
				}
			}
		</script> -->
	</body>
</html>